<template>
  <div class="attendance flexBetween">
    <div class="contentLeft">
      <div class="contentLeftTop">
        <topStatistics />
      </div>
      <div class="contentLeftBottom">
        <todayAttendance></todayAttendance>
      </div>
    </div>
    <div class="contentRight">
      <div class="attendanceDemic">
        <attendanceDemic />
      </div>
      <div class="peopleDays">
        <peopleDays />
      </div>
    </div>
  </div>
</template>

<script>
import topStatistics from './topStatistics/index'
import todayAttendance from './todayAttendance/index'
import attendanceDemic from './attendanceDemic/index'
import peopleDays from './peopleDays/index'
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  components: {
    topStatistics,
    todayAttendance,
    attendanceDemic,
    peopleDays
  },
  data() {
    return {
      
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
 
  methods: {
    moment,
    
  }
}
</script>

<style scoped>
.attendance {
  width: 100%;
  padding-top: 1rem;
  height: calc(100vh - 16.2rem);
}
.contentLeft {
  width: 62.5%;
  min-height: 100%;
}
.contentRight {
  width: 35.7%;
  min-height: 100%;
}
.contentLeftTop {
  height: 20%;
  margin-bottom: 3rem;
}
.contentLeftBottom {
  height: calc(80% - 3rem);
  background: rgba(0, 246, 255, 0.05);
}
.attendanceDemic {
  height: 48%;
  margin-bottom: 3rem;
  background: rgba(0, 246, 255, 0.05);
}
.peopleDays {
  height: calc(52% - 3rem);
  background: rgba(0, 246, 255, 0.05);
}
</style>